<template>
  <section>
    <el-col :span="24">
      <el-tabs v-model="tabs" type="card" @tab-click="handleClick">
        <el-tab-pane label="Coord Job Info" name="a">
          <el-card class="box-card">

            <el-row>
              <el-col :span="4">
                <span class="">Job Id :</span>
              </el-col>
              <el-col :span="8">
                <span class="">{{aCard.id}}</span>
              </el-col>
              <el-col :span="4">
                <span class="">Name :</span>
              </el-col>
              <el-col :span="8">
                <span class="">{{aCard.appName}}</span>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="4">
                <span class="">Status :</span>
              </el-col>
              <el-col :span="8">
                <span class="">{{aCard.status}}</span>
              </el-col>
              <el-col :span="4">
                <span class="">User :</span>
              </el-col>
              <el-col :span="8">
                <span class="">{{aCard.user}}</span>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="4">
                <span class="">Group :</span>
              </el-col>
              <el-col :span="8">
                <span class="">{{aCard.group}}</span>
              </el-col>
              <el-col :span="4">
                <span class="">Frequency :</span>
              </el-col>
              <el-col :span="8">
                <span class="">{{aCard.frequency}}</span>
              </el-col>
            </el-row>


             <el-row>
              <el-col :span="4">
                <span class="">unit :</span>
              </el-col>
              <el-col :span="8">
                <span class="">{{aCard.timeUnit}}</span>
              </el-col>
              <el-col :span="4">
                <span class="">Patent Bundle :</span>
              </el-col>
              <el-col :span="8">
                <span class="">{{aCard.patent}}</span>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="4">
                <span class="">Start Time :</span>
              </el-col>
              <el-col :span="8">
                <span class="">{{aCard.startTime}}</span>
              </el-col>
              <el-col :span="4">
                <span class="">Next Matd :</span>
              </el-col>
              <el-col :span="8">
                <span class="">{{aCard.nextMaterializedTime}}</span>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="4">
                <span class="">End Time :</span>
              </el-col>
              <el-col :span="8">
                <span class="">{{aCard.endTime}}</span>
              </el-col>
              <el-col :span="4">
                <span class="">Pause Time :</span>
              </el-col>
              <el-col :span="8">
                <span class="">{{aCard.pauseTime}}</span>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="4">
                <span class="">Concurrency :</span>
              </el-col>
              <el-col :span="8">
                <span class="">{{aCard.concurrency}}</span>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <div class="">Concurrency :&nbsp;&nbsp;</div>
              </el-col>
              <el-col :span="12">
                <div class="">{{aCard.concurrency}}</div>
              </el-col>
            </el-row>
          </el-card>
          <el-table
            :data="aTable"
            border
            style="width: 100%">
            <el-table-column prop="id" label="Action Id"></el-table-column>
            <el-table-column prop="status" label="Status"></el-table-column>
            <el-table-column prop="externalId" label="Ext Id">
              <template scope="scope">
                <router-link
                  :to="{ path: `/page3152`, query: {task_real_id: `${scope.row.externalId}`}}">
                  {{scope.row.externalId}}  </router-link>
              </template>
            </el-table-column>
            <el-table-column prop="errorCode" label="Error Code"></el-table-column>
            <el-table-column prop="createdTime" label="Created Time"></el-table-column>
            <el-table-column prop="nominalTime" label="Nominal Time"></el-table-column>
            <el-table-column prop="lastModifiedTime" label="Last Mod Time"></el-table-column>
          </el-table>

          <!--分页-->
          <el-col :span="24" class="toolbar" style="padding-bottom:10px;">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pagination.start_index"
              :page-sizes="[5, 10, 20, 50]"
              :page-size="pagination.page_count"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pagination.count"
              style="float:right"></el-pagination>
          </el-col>

        </el-tab-pane>
        <el-tab-pane label="Coord Job Definiton" name="b">
          <pre>{{bLog}}</pre>
        </el-tab-pane>
        <el-tab-pane label="Coord Job Configuration" name="c">
          <pre>{{cConf}}</pre>
        </el-tab-pane>
        <el-tab-pane label="Coord Job Log" name="d">
          <!--工具条-->
          <el-col :span="24" class="toolbar">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
              <el-form-item>
                <Search :allOpts="formInline.allOpts" v-model="formInline.cOpts" @blur="dSearch"></Search>
              </el-form-item>
            </el-form>
          </el-col>

          <pre>{{dLog}}</pre>
        </el-tab-pane>
        <el-tab-pane label="Coord Job Error Log" name="e">
          <pre>{{eLog}}</pre>
        </el-tab-pane>
        <el-tab-pane label="Coord Job Audit Log" name="f">
          <pre style="white-space: pre-wrap;word-wrap: break-word;">{{fLog}}</pre>
        </el-tab-pane>
        <el-tab-pane label="Coord Action Reruns" name="g">
          <!--工具条-->
          <el-col :span="24" class="toolbar">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
              <el-form-item>
                <Search :allOpts="gFormInline.allOpts" v-model="gFormInline.cOpts" @blur="getJobActionRun"></Search>
              </el-form-item>
            </el-form>
          </el-col>
          <el-table
            :data="gTable"
            border
            style="width: 100%">
            <el-table-column prop="id" label="Workflow Id">
              <template scope="scope">
                <router-link
                  :to="{ path: `/page3152`, query: {task_real_id: `${scope.row.id}`}}">
                  {{scope.row.id}}  </router-link>
              </template>
            </el-table-column>
            <el-table-column prop="status" label="Workflow Status"></el-table-column>
            <el-table-column prop="startTime" label="Started"></el-table-column>
            <el-table-column prop="endTime" label="Ended"></el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>

    </el-col>
  </section>
</template>

<script>
  //	import util from '../../common/util'
  import dao from '../../common/dao'
  import Search from '../../components/Search.vue'

  export default {
    components: {Search},
    data() {
      return {
        tabs: 'a',
        tableData: [],
        aCard: {},
        aTable: [],
        bLog: '',
        cConf: '',
        dLog: '',
        formInline: {
          allOpts: [{
            key: 'scope',
            label: 'action list',
            type: '',
            val: ''
          }, {
            key: 'logfilter',
            label: 'Search Filter',
            type: '',
            val: ''
          }],
          cOpts: [{
            key: 'scope',
            label: 'action list',
            type: '',
            val: ''
          }, {
            key: 'logfilter',
            label: 'Search Filter',
            type: '',
            val: ''
          }]
        },

        eLog: '',
        fLog: '',
        gTable: [],
        gFormInline: {
          allOpts: [{
            key: 'scope',
            label: 'action number',
            type: '',
            val: ''
          }],
          cOpts: [{
            key: 'scope',
            label: 'action number',
            type: '',
            val: ''
          }]
        },

        pagination: {
          count: 0,
          start_index: 1,
          page_count: 20,
        },
      }
    },
    methods: {
      handleClick: function () {
      },
      handleSizeChange (val) {
        this.pagination.page_count = val;
        this.oozieJobinfo()
      },
      handleCurrentChange (val) {
        this.pagination.start_index = val;
        this.oozieJobinfo()
      },
      dSearch(){
        this.getJobLog();
      },
      oozieJobinfo(){
        let id = this.query.task_real_id
        let start_index = this.pagination.start_index,
          page_count = this.pagination.page_count
        dao.oozieJobinfo({id, start_index, page_count}).then(res => {
          if (res.FX.err) return false
          let results = res.body.results || {}
          this.aCard = results.jobinfo || {}
          this.aTable = this.aCard.actions || []
          this.pagination.count = res.body.count || 0
          this.cConf = this.aCard.conf || ''
        })
      },
      getJobDefinition(){
        let id = this.query.task_real_id
        dao.getJobDefinition({id}).then(res => {
          if (res.FX.err) return false
          this.bLog = res.body.results.log || ''
        })
      },
      getJobLog(){
        let id = this.query.task_real_id
        let cOpts = this.formInline.cOpts
        let body = {id}
        cOpts.map(item => {
          body[item.key] = item.val
        })
        dao.getJobLog(body).then(res => {
          if (res.FX.err) return false
          this.dLog = res.body.results.log || ''

        })
      },
      getJobErrorLog(){
        let id = this.query.task_real_id
        dao.getJobErrorLog({id}).then(res => {
          if (res.FX.err) return false
          this.eLog = res.body.results.log || ''
        })
      },
      getJobAuditLog(){
        let id = this.query.task_real_id
        dao.getJobAuditLog({id}).then(res => {
          if (res.FX.err) return false
          this.fLog = res.body.results.log || ''
        })
      },

      getJobActionRun(){
        let id = this.query.task_real_id
        let opt = this.gFormInline.cOpts[0] || {}
        let scope = opt.val;
        dao.getJobActionRun({id,scope}).then(res => {
          if (res.FX.err) return false
          this.gTable = res.body.results || []
        })



      },
      pageInit(){
        this.query = this.$store.state.route.query || {};
        this.oozieJobinfo()
        this.getJobDefinition()
        this.getJobLog()
        this.getJobErrorLog()
        this.getJobAuditLog()
        this.getJobActionRun()

      }
    },
    mounted: function () {
      this.pageInit()
    }
  }
</script>

<style scoped>
  .box-card {
    margin-bottom: 20px;
    color: #666;
  }
  .box-card .el-row{
    margin: 5px 0;
  }
  pre {
    white-space: pre-wrap;
    word-wrap: break-word;
  }
  .box-card .el-col-4{
    padding-right: 10px;
    text-align: right;
    font-weight: bold;
  }
  .box-card .el-col-8{
    min-height: 1px;
  }
</style>